<template>
    <div class="main">
        <div class="container">
            <div class="box">
                <router-link class="item" v-for="(item, index) in arr" :key="index"
                    :to="{ path: '/article', query: { id: item.articleId } }">
                    <h2 style="padding-bottom: 0.5rem;" v-text="item.title"></h2>
                    <p v-text="item.description"></p>
                    <span style="padding-top: 0.5rem;">
                        <el-icon>
                            <Timer />
                        </el-icon>{{ item.updatedAt }}
                    </span>
                    <hr style="border-top: 1px dashed blue;width: 100%;
                    margin-top: 1rem;
                    ">
                </router-link>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getArticleList } from '../utils/axios';
import { oneArticle } from '../utils/instances';

let arr = ref<oneArticle[]>([])

onMounted(() => {
    getArticleList(1).then(success => {
        arr.value = success.data.data.data
    }).catch(() => {

    })
})




</script>

<style scoped>
.item {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    /* 设置主轴为垂直方向 */
    align-items: flex-start;
    /* 子项在交叉轴上的起点对齐 */
    /* 添加内边距 */
    box-sizing: border-box;
    /* 盒子模型 */
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 1rem;
}

.item:hover {
    color: rgb(29, 146, 241);
}
.box {
    margin-bottom: 200px;

}

/* 媒体查询(手机端) */
@media (max-width: 768px) {
    .box {
        margin: 0;
    }
}

/* 媒体查询（电脑端） */
@media (min-width: 769px) {
    .item {
        padding: 1rem;
    }
}
</style>